<template>
	<view class="web">
		<view class="_abbr"  v-show='!a'>
			<view class="box">
				<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="姓名">
							    <el-input placeholder='输入真实姓名' v-model="form.name"></el-input>
							</el-form-item>
							  <el-form-item label="性别">
							    <el-radio-group v-model="form.resource">
							      <el-radio label="男"></el-radio>
							      <el-radio label="女"></el-radio>
							    </el-radio-group>
							  </el-form-item>
							<el-form-item label="年龄">
							    <el-input placeholder='输入年龄' type="number" v-model="form.age"></el-input>
							</el-form-item>
							<el-form-item label="身份证号">
							    <el-input placeholder='输入身份证号' v-model="form.identity"></el-input>
							</el-form-item>
							<el-form-item label="联系电话">
							    <el-input placeholder='输入联系电话' type="number" v-model="form.phone"></el-input>
							</el-form-item>
							<el-form-item label="所在地区">
							    <view class="information_input" @click="openAddres2">
							    	<u--input class="input" placeholder="省" v-model="form.value" suffixIcon="arrow-down"></u--input>
							    	<u--input class="input" placeholder="市" v-model="form.value1" suffixIcon="arrow-down"
							    		suffixIconStyle="color: #909399"></u--input>
							    	<u--input class="input" placeholder="县" v-model="form.value2" suffixIcon="arrow-down"
							    		suffixIconStyle="color: #909399"></u--input>
							    </view>
							    			<simple-address  mask-bg-color="rgba(0, 0, 0, 0.4)" ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="purple"></simple-address>
							</el-form-item>
							<el-form-item label="详细地址">
							    <el-input placeholder='输入详细地址'  v-model="form.address"></el-input>
							</el-form-item>
							<el-form-item label="专业领域">
							    <el-input placeholder='所擅长的领域'  v-model="form.field"></el-input>
							</el-form-item>
							<el-form-item label="自我描述">
							    <el-input placeholder='不得超过80个字' type="textarea" v-model="form.desc"></el-input>
							</el-form-item>
				</el-form>
			</view>
			<view class="btn">
				<u-toast ref="uToast"></u-toast>
				<u-button type="success" @click='open'>申请开通</u-button>
			</view>
		</view>
		<view class="submit" v-show="a">
			<view class="ok">
				<p>申请已提交</p>
				<p>请等待审核</p>
			</view>
		</view>
	</view>
</template>

<script>
		import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				a:false,
				cityPickerValueDefault: [0, 0, 1],
				pickerText: '',
				form: {
					name:'',
					resource:'',
					age:'',
					identity:'',
					phone:'',
					value:'',
					value1:'',
					value2:'',
					address:'',
					field:'',
					desc:''
				}
			}
		},
		methods: {
			open(){
				
				if(this.form.name==''||this.form.resource==''||this.form.age==''||this.form.identity==''||this.form.phone==''||this.form.value==''||this.form.value1==''||this.form.value2==''||this.form.address==''||this.form.field==''||this.form.desc==''){
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写完整数据哦！！",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
					})
				}else{
				this.$api.addpsxapply(this.form).then(res=>{
					this.a=!this.a
					setTimeout(function(){
						uni.navigateTo({
							url: '/pages/person/answers'
						})
					},2000)
				   })
				}
			
				// console.log(this.form)
			},
			openAddres2() {
			    // 根据 label 获取
			    var index = this.$refs.simpleAddress.queryIndex(['湖北省', '随州市', '曾都区'], 'label');
			    console.log(index.data);
			    this.cityPickerValueDefault = index.index;
				// console.log(this.cityPickerValueDefault)
			    this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
			    // this.pickerText = JSON.stringify(e); //这个步骤只是为了让大家看到返回的数据
			    this.pickerText = e.label.split('-');   //获取具体的值
				this.form.value= this.pickerText[0]
				this.form.value1= this.pickerText[1]
				this.form.value2= this.pickerText[2]
				// console.log(form.value)
			},
			
		},
		
	}
</script>

<style>
/* .web{
	width: 100%;
	height: 100vh;
	background-color: ghostwhite;
} */
.box{
	/* width: 99%; */
	margin-top: 30upx;
	padding-right: 30upx;
	
}
/deep/.el-form-item{
	 margin-bottom: 30upx;
	 /* background-color: white; */
}
.information_input{
	display: flex;
	flex-wrap: wrap;
}
.btn{
	width:90%;
	margin: 100upx auto;
}
.ok{
	width: 100%;
	text-align: center;
	line-height: 60upx;
	color: gray;
	margin-top: 70upx;
}
</style>
